<template>
  <div class="recommend">
    <div class="recommend-smoll">
      <h2 class="recommend-h2">热销推荐</h2>
      <ul>
          <li class="border-bottom" v-for="item of list" :key="item.id">
            <router-link :to="'detail'+item.id" class="fonColor">
              <div class="recommend-img">
                <img :src="item.imgUrl">
              </div>
              <div class="recommend-con">
                <div class="recommend-con-top">{{item.city}}</div>
                <div class="recommend-con-center">{{item.desc}}</div>
                <a href="#">查看详情</a>
              </div>
            </router-link>
          </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .recommend-h2
    background #f6f6f6
    padding 0.4rem 0
    padding-left 0.2rem
    font-size 0.36rem
    height 1.2rem
  .recommend-smoll
    ul
      overflow hidden
      background #FFFFFF
  .recommend-smoll
    li
      float left
      padding-bottom 0.2rem
      width 100%
    .fonColor
      color black
    .recommend-img
      width 2rem
      height 2rem
      float left
      padding-left 0.2rem
    .recommend-img
      img
        width 100%
        padding-top 0.2rem
    .recommend-con
      float left
      padding-left 0.3rem
    .recommend-con-top
      font-size 0.3rem
      padding 0.25rem 0
    .recommend-con-center
      color #CACACA
      font-size 0.2rem
      padding-bottom 0.3rem
      /* width 4rem */
    .recommend-con
      a
        background orange
        color white
        font-size 0.33rem
        padding 0.04rem 0.2rem
        border-radius 0.06rem
</style>
